<template>
	<view class="papaw" style="padding-bottom: 180rpx;">
		<u-navbar title="发布泡泡" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
		
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="吐泡泡" prop="bubbleContent" class="form-item">
				<u-input type="textarea" placeholder="请填写文字简介，不超过200个字" maxlength="200" :autoHeight="true" v-model="form.bubbleContent" />
			</u-form-item>
			<u-form-item label="上传图片" class="form-item">
				<view style="display: flex;align-items: center;">
					<view class="uploadImg" v-for="img in form.bubbleImgUrlList" :key="img">
						<image :src="img" mode=""></image>
					</view>
					<view class="uploadImg" @click="chooseImage">
						<u-icon name="camera-fill" size="60" color="#c0c4cc"></u-icon>
						<text>上传图片</text>
					</view>
				</view>
				<view style="font-size: 24rpx;color: #999999;">
					与大家一起分享你的精彩瞬间吧~（不超过9张）
				</view>
			</u-form-item>
		</u-form>
		
		<u-cell-group class="create-space space-tips">
			<u-cell-item :arrow="false">
				<view class="title section" slot="title">
					消耗金币
					<view class="num" style="color: #FF6969;">-3</view>
				</view>
				<view class="tips" slot="label">
					<view class="coin_suff">
						<view class="cst">
							可用金币 <text style="color: #FF6969;" v-if="userInfo.availableGoldCoinCount < 3">(金币不足)</text>
						</view>
						<view class="coin_usable">
							{{ userInfo.availableGoldCoinCount }}
						</view>
					</view>
					温馨提示：每日打卡签到、邀请新用户，可获得金币奖励！
				</view>
			</u-cell-item>
		</u-cell-group>
		
		<u-cell-group class="create-space space-tips">
			<u-cell-item :arrow="false">
				<view class="title section" slot="title">
					活力值
					<view class="num" style="color: #FFCB52;">+3</view>
				</view>
				<view class="tips" slot="label">
					温馨提示：泡泡空间初始活力值为30，每天自然消耗1个活
					力值，当活力值为0时，空间不可见。在空间中发布泡泡、
					进行评论、点赞和分享，均可以增加不同数量的活力值，
					详情见规则说明。
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="coin-btn">
			<button type="default" :disabled="btnDisabled" class="recharge_coin" @click="bubbleCreate">完成发布</button>
		</view>
		<u-popup v-model="showSpace" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
			<space-model @close="showSpace = false"></space-model>
		</u-popup>
	</view>
</template>

<script>
import spaceModel from './modal/space.vue'
import { mapState } from 'vuex';
export default {
	components: {
		spaceModel
	},
	data() {
		return {
			form: {
				bubbleContent: '',
				bubbleImgUrlList: [],
				spaceId: null
			},
			show: false,
			mobile: null,
			showSpace: false,
		}
	},
	onLoad(options) {
		this.form.spaceId = options.spaceId
	},
	computed: {
		...mapState(["userInfo"]),
		btnDisabled() {
			if(this.form.bubbleContent) {
				return false
			} else {
				return true
			}
		}
	},
	methods: {
		showAction() {
			this.show = true;
		},
		// 选择图片
		chooseImage() {
			uni.chooseImage({
				count: 1, //一次可以选择的数量
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册或手机选择
				success: res => {
					let filePath = res.tempFilePaths[0]
					this.select(filePath)
					
				}
			})
		},
		// 获取上传状态
		select(filePath){
			let _this = this
			console.log(this.imageValue)
			uni.getFileSystemManager().readFile({
				filePath: filePath, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success:(res) =>{
					let baseImg = 'data:image/png;base64,' + res.data
					this.$u.post('/public/file/uploadBase64', {
						base64: baseImg,
						fileName: 'spaceHeadeImg'
					}).then(res => {
						this.form.bubbleImgUrlList.push(res.url)
					})
				}
			})
		},
		bubbleCreate() {
			// 创建泡泡
			// {
			// 	"bubbleContent": "后台泡泡",
			// 	"bubbleImgUrlList": [],
			// 	"spaceId": 0
			// }
			uni.showLoading()
			this.$u.post('/paopao/mini/space/createPaoPao', this.form).then(res => {
				uni.hideLoading()
				uni.showToast({
				    title: '发布成功',
				    icon: 'none',
				    duration: 3000,
				});
				setTimeout(() => {
					this.$u.route({
						type: 'navigateBack'
					})
				}, 500)
			})
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.papaw {
	background-color: #F7F7F7;
}
/deep/.u-form-item {
	background-color: #FFFFFF;
	margin: 32rpx 32rpx 0;
	padding: 32rpx !important;
	border-radius: 32rpx;
	font-size: 32rpx !important;
	overflow: hidden;
}
.create-space {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 32rpx 32rpx 0;
	border-radius: 32rpx;
	overflow: hidden;
	background-color: #FFFFFF;
	.title {
		display: flex;
		align-items: center;
		color: @mText;
		&.section {
			justify-content: space-between;
			font-size: 32rpx;
		}
	}
}
.space-tips {
	/deep/.u-cell_title {
		width: 100% !important;
	}
}
.tips {
	font-size: 24rpx;
}
.coin_suff {
	font-size: 32rpx;
	color: @mText;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 32rpx;
	padding-bottom: 18rpx;
	border-top: 2rpx solid #E6E6E6;
	margin-top: 32rpx;
}
.uploadImg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 128rpx;
	height: 128rpx;
	border: 2rpx solid #E6E6E6;
	background-color: #F7F7F7;
	margin-right: 20rpx;
	text {
		padding-top: 4rpx;
		font-size: 24rpx;
		color: #999
	}
	image {
		width: 100%;
		height: 100%;
	}
}
/deep/.fild-body  {
	justify-content: flex-end;
}

.coin-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24rpx 32rpx;
	border-top: 2rpx solid #E6E6E6;
	background-color: #FFFFFF;
	.recharge_coin {
		line-height: 96rpx;
		background: #FF7B02 !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		&[disabled] {
			background: #CCCCCC !important;
			color: #FCFCFC;
		}
	}
}
.address_update {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: @tText;
	.icon_update {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		background: url('../../static/header/icon_update.png') no-repeat center;
		background-size: contain;
		margin-right: 8rpx;
	}
}
.icon_address {
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
	background: url(../../static/header/icon_point.png) no-repeat center;
	background-size: contain;
}
</style>
